<template>
  <div>
    <v-head></v-head>
    <section class="nav">
      <v-PageHead />
    </section>

    <section style="background:#EEEEEE;height:87vh">
      <div style="height:100%">
        <transition name="move" leave-active-class="animate__animated animate__fadeOutLeft" :appear="true" enter-active-class="animate__animated animate__fadeInRight" mode="out-in">
          <keep-alive :include="keepAliveIncludeList" :max="5">
            <router-view></router-view>
          </keep-alive>
        </transition>
      </div>
    </section>
    <footer>
      <v-footer></v-footer>
    </footer>
  </div>
</template>

<script>
import vHead from "common/TopologyHeader.vue";
import vFooter from "common/Footer.vue";
import vPageHead from "./menuComponent/pageTab.vue";

export default {
  data() {
    return {
      keepAliveIncludeList: [],
      response: Object,
      darkModeList: {
        LargeScreen: "content-box-time1",
      },
    };
  },
  components: {
    vHead,
    vFooter,
    vPageHead,
  },
  computed: {
    contentBoxClassArr() {
      let _classArr = [];

      let _key = this.$route.meta.menu;

      if (Object.hasOwnProperty.call(this.darkModeList, _key)) {
        for (const key in this.darkModeList) {
          if (key === _key) {
            const _tsTime = this.darkModeList[key];
            _classArr.push("content-box-bg", _tsTime);
          }
        }
      } else {
        _classArr.push("content-box-time1");
      }

      return _classArr;
    },
  },
};
</script>

<style scoped>
/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}
/* .nav {
  background: #B3C0D1;
} */
</style>